<template>
	<view class="header">
		<view class="iconfont icon-xiangzuojiantou">
		</view>
		<view class="sousuo">
			<text class="iconfont icon-Magnifier"></text>
			<input type="text" value="" placeholder="搜索订单"/>
		</view>
	</view>
	<view class="list">
		<view class="" v-for="(v,i) in drr" >
			<view :class="v==typearr?'active':''"  @click="dianji(v,i)">
				{{v}}
			</view>
		</view>
		
	</view>
	<view v-for="(v,i) in ptdingdan">
		<view v-show="v.ptdd_zhuangtai==typearr ?'true':''" class="dt">
			<view class="dingdan">
				<text>订单编号:{{v.ptdd_bianhao}}</text>
				<text>{{v.ptdd_zhuangtai}}</text>
			</view>
			<view class="xinxi" @click="neirong(v,i)">
				<view class="tupian">
					<image :src="IP+v.yp_imgsrc" mode=""></image>
				</view>
				<view class="yaopin">
					<view>{{v.yp_mingcheng}}</view>
					<br>
					<text>￥{{v.pt_tuangoujiage}}</text>
					<text>{{v.pt_jiage}}</text>
				</view>
			</view>
			<view v-show="v.ptdd_zhuangtai=='拼团中'?'true':''" class="btn">
				<view @click="quxiao(v,i)">取消订单</view>
				<view @click="fenxiang">邀请好友</view>
			</view>
			<view v-show="v.ptdd_zhuangtai=='待支付'?'true':''" class="btn">
				<view @click="quxiao(v,i)">取消订单</view>
				<view @click="fukuan(v,i)">立即付款</view>
			</view>
			<view v-show="v.ptdd_zhuangtai=='待发货'?'true':''" class="btn">
				<view @click="quxiao(v,i)">取消订单</view>
				<view @click="fahuo">提醒发货</view>
			</view>
			<view v-show="v.ptdd_zhuangtai=='已完成'?'true':''" class="btn">
				<view @click="shanchu(v,i)">删除订单</view>
				<view @click="pintuan">再次拼团</view>
			</view>
			<view v-show="v.ptdd_zhuangtai=='拼团失败'?'true':''" class="btn">
				<view @click="shanchu(v,i)">删除订单</view>
				<view @click="pintuan">再次拼团</view>
			</view>
		</view>
	</view>
	<view>
		<!-- 分享示例 -->
		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff" >
		<uni-popup-share @select="select"></uni-popup-share>
		</uni-popup>
	</view>
</template>

<script>
	import {reactive,toRefs,onMounted,computed} from 'vue'
	import {useStore} from 'vuex'
	import http from '../../utils/http.js'
	import store from '../../store/index.js'
	export default {
		setup(){
		const {state,getters,commit,dispatch} = useStore();
		let data=reactive({
			IP:computed(()=>state.IP),
			drr:['待支付','拼团中','待发货','已完成','拼团失败'],
			typeCrr:[],
			typeArr:[],
			typearr:'待支付',
			// 取消订单
			quxiao(e){
				console.log(e)
			      uni.showModal({
			      	title: '',
			      	content: '确定取消订单?',
			      	success: function (res) {
			      		if (res.confirm) {
			      			uni.showToast({
			      				title: '已取消',
			      				duration: 2000,
								icon:'success'
			      			});
							http({
								url:'/ptdingdandelet',
								method:'post',
								data:{
									id:e.ptdd_id
								}
							}).then((res)=>{
								// console.log(res.data.data)
								data.get()
							})
			      		} else if (res.cancel) {
			      			console.log('用户点击取消');
			      	}
			    }
			})
		},
		// 删除订单
			shanchu(e){
				console.log(e)
			      uni.showModal({
			      	title: '',
			      	content: '确定删除订单?',
			      	success: function (res) {
			      		if (res.confirm) {
			      			uni.showToast({
			      				title: '已删除',
			      				duration: 2000,
								icon:'success'
			      			});
							http({
								url:'/ptdingdandelet',
								method:'post',
								data:{
									id:e.ptdd_id
								}
							}).then((res)=>{
								// console.log(res.data.data)
								data.get()
							})
			      		} else if (res.cancel) {
			      			console.log('用户点击取消');
			      	}
			    }
			})
		},
		// 切换
			dianji(e){
				// console.log(e)
				data.typearr=e
				// console.log(data.type)
			},
		// 付款
		    fukuan(e){
				// console.log(parseFloat(e))
				let total=parseFloat(e.pt_tuangoujiage)*parseFloat(e.yaopinshuliang)+parseFloat(e.yp_yunfei)
				// console.log(e)
				commit('ptdingdan/total',total)
				commit('ptdingdan/fukuan',e)
				uni.navigateTo({url:'/pages/ptquerendingdan/ptquerendingdan'})
			},
		// 获取数据
			get:function(){
				http({
					url:'/getpintuandingdan'
				}).then((res)=>{
					// console.log(res.data.data);
					// 存数据
					commit('ptdingdan/getData',res.data.data);
					// 数据去重
					let arr=[...res.data.data]
					for(let i=0;i<arr.length;i++){
						for(let j=i+1;j<arr.length;j++){
							if(arr[i].ptdd_zhuangtai==arr[j].ptdd_zhuangtai){
								arr.splice(j,1);
								j--
							}
						}
					}
					data.typeArr.push(arr)
					// console.log(data.typeArr)
					let brr=[...data.typeArr]
				    let crr=Object.values(brr[0])
					for(let k=0;k<crr.length;k++){
						if(crr[k].ptdd_zhuangtai=="你好啊"){
							crr.splice(k,1);
						}
					}
					data.typeCrr.push(crr)
					// console.log(crr)
					
				})
			},
		// 分享
		    fenxiang(){
				this.$refs.share.open()
			},
		    select(){
				uni.showToast({
					title: '分享成功',
					duration: 2000,
					icon:'success'
				});
			},
		// 发货
		    fahuo(){
				uni.showToast({
					title: '提醒发货成功',
					duration: 2000,
					icon:'success'
				});
			},
		// 内容跳转
		    neirong(e){
				let total=parseFloat(e.pt_tuangoujiage)*parseFloat(e.yaopinshuliang)+parseFloat(e.yp_yunfei)
				// console.log(e)
				commit('ptdingdan/total',total)
				// console.log(e)
				commit('ptdingdan/xiangqing',e)
				if(e.ptdd_zhuangtai=='拼团中'){
					uni.navigateTo({url:'/pages/ptxqpintuanz/ptxqpintuanz'})
				}
				if(e.ptdd_zhuangtai=='待发货'){
					uni.navigateTo({url:'/pages/ptxqdaifahuo/ptxqdaifahuo'})
				}
				if(e.ptdd_zhuangtai=='待支付'){
					uni.navigateTo({url:'/pages/ptxqdaizhifu/ptxqdaizhifu'})
				}
				if(e.ptdd_zhuangtai=='已完成'){
					uni.navigateTo({url:'/pages/ptxqdone/ptxqdone'})
				}
				if(e.ptdd_zhuangtai=='拼团失败'){
					uni.navigateTo({url:'/pages/ptxqshibai/ptxqshibai'})
				}
				
			},
			// 再次拼团
			pintuan(){
				uni.navigateTo({url:'/pages/DiscountGroup/DiscountGroup'})
			},
			// 使用数据
			ptdingdan:computed(()=>state.ptdingdan.ptdingdan)
		})
		// 获取数据
		onMounted(()=>{
			// data.IP=store.state.IP
			data.get()
		})
		return {...toRefs(data)}
		},
	}
</script>

<style lang="less">
	@import url("~@/static/fonts/iconfont.css");
	.header{
		margin: 20rpx 20rpx;
		display: flex;
		view:nth-of-type(1){
				font-size: 50rpx;
		}
		.sousuo{
			height: 48rpx;
			line-height: 48rpx;
			margin-left: 100rpx;
			display: flex;
			border: 1px solid #F2F2F2;
			border-radius: 20rpx;
				.iconfont{
					font-size: 40rpx;
				}
		}
	}
	.dt{
		background-color: #F2F2F2;
	}
	.list{
		display: flex;
		justify-content: space-between;
		// border: 1px solid #F2F2F2;
		view{
			text-align: center;
			flex: 1;
			// border: 1px solid #F2F2F2;
			border-left: none;
			border-right: none;
			padding: 20rpx 5rpx;
		}
	}
	.dingdan{
		display: flex;
		// justify-content: space-around;
		margin-top: 50rpx;
		text:nth-of-type(1){
			margin-left: 30rpx;		
		}
		text:nth-of-type(2){
			margin-left: 250rpx;
			color: gray;
		}
		
	}
	.xinxi{
		display: flex;
		padding: 20rpx 20rpx;
	}
	.tupian{
		image{
			width: 230rpx;
			height: 180rpx;
		}
	}
	.yaopin{
		margin-left: 40rpx;
		view:nth-of-type(1){
			padding: 40rpx 40rpx;
		}
		text{
			margin: 0rpx 40rpx;
		}
			
		text:nth-of-type(1){
			color: red;
		}
		text:nth-of-type(2){
			color: gray;
			text-decoration: line-through;
		}
	}
	.btn{
		display: flex;
		justify-content: space-around;
		view:nth-of-type(1){
		border: 1px solid #DA2222;
		padding: 10rpx 10rpx;
		margin-left: 370rpx;
		}
		view:nth-of-type(2){
		border: 1px solid #DA2222;
		background-color: #DA2222;
		color: white;
		padding: 10rpx 10rpx;
		margin-right: 30rpx;
		}
	}
	.active{
		border-bottom: 1px solid red!important
	}
</style>
